<template>
  <div class="hello">
    <!-- 头部导航 -->
    <header id="header">
      <div class="nav-bar">
        <div class="container">
          <div class="navigation">
            <div class="logo">
              <router-link :to="'/index'">
                <img style="width: 100px" src="../../static/images/indeximg/LOGO.png" alt="Oelfare" />
              </router-link>
            </div>
            <nav id="flexmenu">
              <div class="nav-inner">
                <div id="mobile-toggle" class="mobile-btn" @click="toggle_none"></div>
                <ul v-if="widWidth>992? toggle_b :toggle_no" id="menu-main-menu" class="main-menu">
                  <li v-for="(item, index) in navlist" :key="index" @click="navactive(index)" :class="
                      navIndex == index
                        ? 'menu-item current-menu-item menu-item-has-children active'
                        : 'menu-item current-menu-item menu-item-has-children'
                    ">
                    <router-link :to="item.pushurl">{{
                      item.name
                    }}</router-link>
                  </li>
                </ul>
              </div>
            </nav>
            <div class="element phone dis-none">
              <img src="../../static/images/phone.png" alt="phone" />
              <div><span>tel：</span>(+86)0755-23487797</div>
            </div>
          </div>
        </div>
      </div>
    </header>
    <router-view></router-view>
    <!-- 关于我们  底部导航 -->
    <footer id="footer" class="footer wow fadeInUp">
      <div class="footer-above">
        <div class="container">
          <div class="row">
            <div class="col-lg-8 col-sm-12">
              <div class="footer_widget" style="width: 50%">
                <div class="widget-title">
                  <h4>关于菜多多</h4>
                </div>
                <div class="footer_recent_cause">
                  <ul>
                    <li class="menu-item">
                      <a href="#">
                        <i class="ion-md-arrow-forward"></i> 公司介绍
                      </a>
                    </li>
                    <li class="menu-item">
                      <a href="#">
                        <i class="ion-md-arrow-forward"></i> 产品中心
                      </a>
                    </li>
                    <li class="menu-item">
                      <a href="#"><i class="ion-md-arrow-forward"></i> 团队精神</a>
                    </li>
                    <li class="menu-item">
                      <a href="#"><i class="ion-md-arrow-forward"></i> 公司新闻</a>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="footer_widget" style="width: 50%">
                <div class="widget-title">
                  <h4>联系我们</h4>
                </div>
                <div class="address_content">
                  <ul>
                    <li>邮箱：cddnykj@qq.com</li>
                    <li>电话：0755-23487797</li>
                  </ul>
                </div>
              </div>
            </div>

            <div class="col-lg-4 col-sm-12">
              <div class="footer_widget">
                <div class="address_content">
                  <div class="d-i-b-w-50">
                    <div class="d-b text-col">微信小程序</div>
                    <img class="qrcodeimg" src="../../static/images/indeximg/qrcode.jpg" alt="icon" />
                  </div>
                  <div class="d-i-b-w-50">
                    <div class="d-b text-col">微信公众号</div>
                    <img class="qrcodeimg" src="../../static/images/indeximg/public.jpg" alt="icon" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer-bottom">
        <div class="container">
          <div class="footer_bottom_inner">
            <div class="logo-footer">
              <a href="index.html">
                <img style="width: 100px" src="../../static/images/indeximg/LOGO.png" alt="Oellfare" />
              </a>
            </div>
            <div class="copyright">
              <p>
                &copy;
                <a href="#">深圳市菜多多农业科技有限公司版权所有</a>
              </p>
            </div>
            <div class="terms_nav">
              <ul>
                <li class="menu-item"><a href="#">条款</a></li>
                <li class="menu-item"><a href="#">隐私</a></li>
                <li class="menu-item"><a href="#">常见问题</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navlist: [
        { name: "首页", pushurl: "/index" },
        { name: "产品介绍", pushurl: "/product" },
        { name: "公司简介", pushurl: "/introduce" },
        { name: "新闻动态", pushurl: "/Journalism" },
        { name: "合作加盟", pushurl: "/cooperation" },
      ],
      navIndex: 0,
      toggle_no: false,
      widWidth: 0,
      toggle_b: true,
    };
  },
  mounted() {
    this.widWidth = document.body.clientWidth;
    console.log(this.widWidth);
  },
  methods: {
    // 导航每一项index
    navactive(index) {
      this.toggle_no = false;
      this.navIndex = index;
    },
    // 移动端菜单图标
    toggle_none() {
      this.toggle_no = true;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.qrcodeimg {
  width: 100%;
}
.d-i-b-w-50 {
  display: inline-block;
  width: 50% !important;
  padding: 8px;
}

.d-b {
  display: block;
  text-align: center;
}
.text-col {
  color: #94969f;
}
@media screen and (max-width: 768px) {
  .navigation {
    padding: 0 !important;
  }
  .mobile-btn {
    display: inline-block;
  }

  /* 底部导航 */
  .widget-title {
    margin-bottom: 10px !important;
  }
  .footer_widget {
    margin-bottom: 20px;
  }
  .dis-none {
    display: none !important;
  }
}
@media only screen and (max-width: 480px) {
}
</style>
